<template>
  <view class="login">
    <view class="content" v-show="loading">
      <!-- 头部logo -->
      <view class="header">
        <image :src="logoImage"></image>
      </view>
      <!-- 主体表单 -->
      <view class="main">
        <view class="loginset padding">
          <text class="padding-bottom-sm" :class="tab == 1 ? 'cur' : ''" @tap="setlogin" data-id="1">账号绑定</text>
          <text class="padding-bottom-sm" :class="tab == 2 ? 'cur' : ''" @tap="setlogin" data-id="2">手机号绑定</text>
        </view>
        <wInput v-model="phoneData" type="text" maxlength="11" :placeholder="place" :focus="isFocus"></wInput>
        <wInput v-model="passData" type="password" maxlength="11" placeholder="密码" v-if="tab == 1"></wInput>

        <wInput
          v-model="verCode"
          type="number"
          maxlength="6"
          placeholder="验证码"
          isShowCode
          codeText="获取验证码"
          setTime="120"
          ref="runCode"
          @setCode="getVerCode()"
          v-else
        ></wInput>
      </view>
      <wButton class="wbutton" text="绑定账户" :rotate="isRotate" bgColor="linear-gradient(45deg, #39b54a, #8dc63f)" @click="startLogin"></wButton>
      <!-- 底部信息 -->
      <view class="footer padding-sm margin-sm" style="border: 1px dashed #f60; height: auto; border-radius: 8px; color: #f60">
        第一次微信登陆需要绑定账号，绑定成功后登陆不会出现该页面
      </view>
      <view class="footer">
        <text @tap="isShowAgree" class="cuIcon" :class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'">同意</text>
        <!-- 协议地址 -->
        <navigator url="../index/agree?id=18" open-type="navigate" class="text-cyan">《{{ this.app.title }}用户协议》</navigator>
        与
        <navigator url="../index/agree?id=19" open-type="navigate" class="text-cyan">《{{ this.app.title }}隐私协议》</navigator>
      </view>
    </view>
  </view>
</template>

<script>
let _this;
import wInput from '../../components/watch-login/watch-input.vue'; //input
import wButton from '../../components/watch-login/watch-button.vue'; //button

export default {
  data() {
    return {
      //logo图片 base64
      logoImage: '',
      place: '用户名/手机号码',
      phoneData: '', //用户/电话
      passData: '', //密码
      isRotate: false, //是否加载旋转
      isFocus: true, // 是否聚焦
      tab: 1,
      verCode: '', //验证码
      showAgree: false, //协议是否选择
      isfa: true,
      loading: false,
      token: null,
      qrcode: 0
    };
  },
  components: {
    wInput,
    wButton
  },
  onLoad(ops) {
    if (ops.token != null && ops.token != undefined && ops.token != '') {
      this.token = ops.token;
    } else {
      this.app.showMsg('error', '/');
    }
  },
  mounted() {
    uni.showLoading();
    _this = this;
    _this.geconfig();
  },
  methods: {
    geconfig() {
      uni.request({
        method: 'post',
        url: _this.app.apiHost + '/getlogo',
        header: { Authorization: '' },
        success: (data) => {
          console.log(data.data.code);
          if (data.data.code == 0) {
            let da = data.data.data;
            _this.logoImage = da.murl + da.logo;
            uni.hideLoading();
            _this.loading = true;
          }
        }
      });
    },
    setlogin(e) {
      let ta = e.currentTarget.dataset.id;
      this.tab = ta;
      if (ta == 2) {
        this.place = '手机号码';
      } else {
        this.place = '用户名/手机号码';
      }
    },
    isShowAgree() {
      //是否选择协议
      _this.showAgree = !_this.showAgree;
    },

    startLogin(e) {
      console.log(e);
      //登录
      if (this.isRotate) {
        //判断是否加载中，避免重复点击请求
        return false;
      }
      if (this.phoneData.length == '') {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '用户名/手机号不能为空'
        });
        return;
      }
      if (this.tab == 1) {
        if (this.passData.length < 5) {
          uni.showToast({
            icon: 'none',
            position: 'bottom',
            title: '密码格式错误'
          });
          return;
        }
      } else {
        if (this.verCode.length != 6) {
          uni.showToast({
            icon: 'none',
            position: 'bottom',
            title: '请输入正确的验证码'
          });
          return;
        }
      }
      _this.isRotate = true;
      uni.request({
        method: 'post',
        url: _this.app.apiHost + '/wxloginbind',
        header: { Authorization: '' },
        data: { username: _this.phoneData, password: _this.passData, type: _this.tab, yzm: _this.verCode, tokens: _this.token },
        success: (data) => {
          console.log(data);
          if (data.data.code == 0) {
            _this.app.setAuthCode(data.data.data.token);
            uni.setStorageSync('users', JSON.stringify(data.data.data.user));
            console.log(87994888);
            _this.app.showMsg('登陆成功', '../my/my');
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/my/my'
              });
            }, 1000);
          } else if (data.data.code == 2) {
            _this.isRotate = false;
            _this.app.showMsg('token失效重新登陆', 'login');
          } else if (data.data.code == 1) {
            _this.isRotate = false;
            _this.app.showMsg(data.data.msg);
          } else {
            _this.isRotate = false;
            _this.app.showMsg('系统错误', '/');
          }
        },
        fail(a) {
          _this.isRotate = false;
          uni.showToast({
            title: '链接失败',
            position: 'bottom',
            icon: 'error'
          });
        }
      });
    },
    getVerCode() {
      //获取验证码
      if (_this.phoneData.length != 11) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '手机号不正确'
        });
        return false;
      }
      if (this.isfa == false) return;
      console.log('获取验证码');
      uni.request({
        method: 'post',
        url: _this.app.apiHost + '/sendbCode',
        data: { phone: _this.phoneData, token: _this.token },
        success: (data) => {
          _this.isfa = true;
          if (data.data.code == 0) {
            _this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
            _this.app.showMsg('发送成功');
          } else if (data.data.code == 2) {
            _this.$refs.runCode.$emit('runCode', parseInt(data.data.time));
            uni.showToast({
              title: data.data.msg,
              position: 'bottom',
              icon: 'error'
            });
          } else {
            _this.$refs.runCode.$emit('runCode', 0);
            uni.showToast({
              title: data.data.msg,
              position: 'bottom',
              icon: 'error'
            });
          }
        },
        fail(a) {
          _this.$refs.runCode.$emit('runCode', 0);
          uni.showToast({
            title: '链接失败',
            position: 'bottom',
            icon: 'error'
          });
        }
      });
    }
  }
};
</script>

<style>
@import url('../../components/watch-login/css/icon.css');
@import url('./css/main.css');
.dfan {
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 20px;
  border: 1px solid #c1c1c1;
  padding: 3px 5px;
}
.loginset {
}
.loginset text {
  width: 50%;
  display: inline-block;
  text-align: center;
}
.loginset .cur {
  border-bottom: #1387fc 2px solid;
}
</style>
